<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 开头 -->
      <div class="text item">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button style="float: right; padding: 3px 0 width:80px;height:35px"  type="success" size="small" @click="hJump">
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </div>
      <!-- 选择区域 -->
      <!-- 第一行 -->
      <el-form  :model="formInline"  size="mini" ref="myForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" label-width="80px" prop="subjectID">
              <el-select v-model="formInline.subjectID" placeholder="请选择" @change="hSubjectChange">
                <el-option v-for="(item,index) in subjectList" :key="index" :label="item.label" :value="item.value" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="80px" prop="catalogID">
              <el-select v-model="formInline.catalogID" placeholder="请选择">
                <el-option v-for="(item,index) in catalogList" :key='index' :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="标签" label-width="80px" prop="tags">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option v-for="(item,index) in tagList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" label-width="80px" style="float:right" prop="keyword">
              <el-input v-model="formInline.keyword" placeholder="请根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      <!-- 第二行 -->
        <el-row>
          <el-col :span="6">
            <!-- 试题类型 -->
            <el-form-item label="试题类型" label-width="80px" prop="questionType">
              <el-select v-model="formInline.questionType">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" label-width="80px" prop="difficulty">
              <el-select v-model="formInline.difficulty" placeholder="请选择">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction" class="direction">
              <el-select
                class="filter-item"
                v-model="formInline.direction"
              >
                <el-option
                  v-for="item in directions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px" style="float:right" prop="creatorID">
              <el-select v-model="formInline.creatorID" placeholder="请选择">
                <el-option v-for="item in creatorList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      <!-- 第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="80px" prop="remarks">
              <el-input v-model="formInline.remarks"></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px"  prop="shortName">
              <el-input v-model="formInline.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="城市" label-width="80px">
            <el-select
               style="margin-right:10px"
              class="city"
              v-model="formInline.province"
              @keyup.enter="handleFilter"
              @change="handleProvince">
              <el-option
                v-for="item in citySelect.province"
                :key="item" :label="item"
                :value="item">
              </el-option>
            </el-select>
             <el-select
              class="city"
              v-model="formInline.city"
              @keyup.enter="handleFilter">
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6" label-width="80px">
            <el-form-item size="small" style="float:right">
              <el-button @click="hClear">清除</el-button>
              <el-button type="primary" @click="hSearch" :loading="isLoading">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 选择区结束 -->
      <!-- 数据记录 -->
       <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
      <!-- table表单 -->
        <el-table
          :data="items"
          :loading="isLoading"
          stripe
          fit
          style="width: 100%">
           <el-table-column
            label="序号"
            type='index'
            :index ="indexId">
          </el-table-column>
          <el-table-column
            prop="number"
            label="试题编号"
            >
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            >
          </el-table-column>
          <el-table-column
            prop="catalog"
            label="目录"
            >
          </el-table-column>
          <el-table-column
            label="题型"
            >
            <template slot-scope="scope">
              <span v-if="scope.row.questionType === '1'">单选</span>
              <span v-else-if="scope.row.questionType === '2'">多选</span>
              <span v-else-if="scope.row.questionType === '3'">简答</span>
            </template>
          </el-table-column>
          <el-table-column
            label="题干"
            >
             <template slot-scope="scope">
               <span v-html="scope.row.question"></span>
             </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            >
            <template slot-scope="scope">
              <span>{{scope.row.addDate | dateFormate}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            >
            <template slot-scope="scope">
              <span v-if="scope.row.difficulty === '1'">简单</span>
              <span v-else-if="scope.row.difficulty === '2'">一般</span>
              <span v-else-if="scope.row.difficulty === '3'">困难</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="creator"
            label="录入人"
            >
          </el-table-column>
           <el-table-column
            label="操作"
            min-width="200"
            >
            <template slot-scope="scope">
              <!-- 查阅 -->
              <el-button plain type="primary" size="small" icon="el-icon-view" circle @click="hPreview(scope.row.id)"></el-button>
              <!-- 编辑 -->
              <el-button plain type="success" size="small" icon="el-icon-edit" circle @click="hEdit(scope.row.id)"></el-button>
              <!-- 删除 -->
              <el-button plain type="danger" icon="el-icon-delete" circle size="small" @click="hDelete(scope.row.id)"></el-button>
              <!-- 精选 -->
              <el-button plain type="danger"  size="small" icon="el-icon-check" circle @click="Hselected(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- page-size 每页显示条目个数  page-sizes每页显示个数选择器的选项设置 current-page当前页数-->
        <el-pagination
          class="pagebox"
          style="float:right"
          :loading="isLoading"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="requestParameters.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="requestParameters.pagesize"
          layout="prev, pager, next, sizes, jumper"
          :total="total">
        </el-pagination>
        <!-- 弹出框 -->
         <el-dialog title="题目预览"
                :visible.sync="dialogVisible" width="50%">
                <!-- 第一个盒子 -->
                <el-row :gutter="20" style="padding:10px">
                  <el-col :span="6"><div>【题型】：
                    <span v-if="content.questionType === '1'">单选</span>
                    <span v-else-if="content.questionType === '2'">多选</span>
                    <span v-else-if="content.questionType === '3'">简答</span>
                    </div></el-col>
                  <el-col :span="6"><div >【编号】：{{content.id}}</div></el-col>
                  <el-col :span="6"><div >【难度】：
                    <span v-if="content.difficulty === '1'">简单</span>
                    <span v-else-if="content.difficulty === '2'">一般</span>
                    <span v-else-if="content.difficulty === '3'">困难</span>
                    </div></el-col>
                  <el-col :span="6"><div >【标签】：{{content.tags}}</div></el-col>
                </el-row>
                <el-row :gutter="20" style="padding:10px">
                  <el-col :span="6"><div >【学科】：{{content.subjectName}}</div></el-col>
                  <el-col :span="6"><div >【目录】：{{content.catalogID}}</div></el-col>
                  <el-col :span="6"><div >【方向】：{{content.direction}}</div></el-col>
                </el-row>
                <hr>
                <!-- 题目 -->
                <div>
                  【题干】：
                  <div v-html="content.question">{{content.question}}</div>
                  <div v-if="content.questionType === '1'">
                    <div>选项：（以下选中的选项为正确答案）</div>
                    <el-radio-group v-model="radio">
                      <el-radio @click.native="hPrevent" style="padding:10px 0;display:block" :label="option.isRight" v-for="option in content.options" :key="option.code">{{option.title}}</el-radio>
                    </el-radio-group>
                  </div>
                  <div v-else-if="content.questionType === '2'">
                    <div>选项：（以下选中的选项为正确答案）</div>
                    <el-checkbox-group v-model="checkList">
                      <el-checkbox @click.native="hPrevent" style="padding:10px 0;display:block" :label="option.code" v-for="option in content.options" :key="option.code">{{option.title}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
                <hr>
                <!--  参考答案-->
                <div>
                  <div>【参考答案】： <el-button type="danger" @click="isShow=!isShow">视频答案预览</el-button> </div>
                  <video :src="content.videoURL" style="width:180px" v-show="isShow" controls="controls" autoplay='autoplay'></video>
                </div>
                <hr>
                <!-- 答案解析 -->
                <div>
                  【答案解析】：<div v-html="content.answer">{{content.answer}}</div>
                </div>
                <hr>
                <!-- 题目备注 -->
                <div>
                  <div>【题目备注】：{{content.remarks}}</div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogVisible = false" :loading="isLoading">关闭</el-button>
                </span>
              </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple } from '@/api/base/users.js'
import { simple as subjectSimple } from '@/api/hmmm/subjects.js'
import { simple as catalogSimple } from '@/api/hmmm/directorys.js'
import { simple as tagSimple } from '@/api/hmmm/tags.js'
export default {
  data () {
    return {
      formInline: {
        direction: '',
        difficulty: '', // 难度
        subjectID: null, // 科目
        questionType: '', // 题型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        creatorID: null, // 录入人
        catalogID: null// 目录
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      isLoading: false,
      dialogVisible: false,
      requestParameters: {
        page: 1,
        pagesize: 5
      },
      isShow: false,
      radio: 1, // 双向绑定单选框
      checkList: [],
      content: {
        options: [],
        questionType: '', // 题型
        id: '',
        difficulty: '', // 难度
        subjectName: '', // 科目
        catalogID: '', // 目录
        direction: '',
        tags: '',
        question: '',
        answer: '',
        remarks: '',
        videoURL: ''
      },
      alertText: '',
      total: null,
      counts: '',
      pages: '',
      items: [],
      subjectList: [],
      creatorList: [],
      catalogList: [],
      tagList: [],
      directions: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ]
    }
  },
  created () {
    this.loadQuestions()
    this.handleProvince()
    this.getCityData()
    this.creator()
    this.subject()
  },
  filters: {
    dateFormate (val) {
      const date = new Date(val)
      const y = date.getFullYear()
      const m = addZero(date.getMonth() + 1)
      const d = addZero(date.getDate())
      const h = addZero(date.getHours())
      const mm = addZero(date.getMinutes())
      const s = addZero(date.getSeconds())

      return y + '-' + m + '-' + d + '  ' + h + ':' + mm + ':' + s
      function addZero (r) {
        return (r < 10) ? '0' + r : r
      }
    }
  },
  methods: {
    // 获取弹出框数据
    async loadPreview (objeditId) {
      this.content.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      console.log(res)
      // // 获取详情
      this.content = res
      const options = this.content.options
      for (const i in options) {
        if (options[i].isRight === 1) {
          this.checkList.push(options[i].code)
        }
      }
    },
    // 获取弹出框
    hPreview (id) {
      this.dialogVisible = true
      this.isShow = false
      this.loadPreview(id)
    },
    // 导入后台数据  基础题库列表
    async loadQuestions () {
      // 获取列表请求参数
      this.isLoading = true
      const data = {
        direction: this.formInline.direction,
        difficulty: this.formInline.difficulty, // 难度
        subjectID: this.formInline.subjectID, // 科目
        questionType: this.formInline.questionType, // 题型
        tags: this.formInline.tags, // 标签
        province: this.formInline.province, // 省份
        city: this.formInline.city, // 城市
        keyword: this.formInline.keyword, // 关键字
        remarks: this.formInline.remarks, // 题目备注
        shortName: this.formInline.shortName, // 企业简称
        creatorID: this.formInline.creatorID, // 录入人
        catalogID: this.formInline.catalogID, // 目录
        pagesize: this.requestParameters.pagesize,
        page: this.requestParameters.page
      }
      const res = await list(data)
      console.log(res)
      this.items = res.data.items
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
      this.isLoading = false
    },
    // 跳转页面
    hJump () {
      this.$router.push('/questions/new')
    },
    // 获取城市
    // 获取城市
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 获取学科
    async subject () {
      const res = await subjectSimple()
      this.subjectList = res.data
    },
    hSubjectChange (val) {
      console.log('学科输入框变了', val)
      if (val) {
        this.formInline.catalogID = null
        this.formInline.tags = ''
      }
      this.catalog()
      this.tag()
    },
    // 获取目录
    async catalog () {
      const res = await catalogSimple()
      this.catalogList = res.data
    },
    // 获取标签
    async tag () {
      const res = await tagSimple()
      this.tagList = res.data
      console.log('打印', res)
    },
    // 录入人
    async creator () {
      const res = await simple({
        items: [],
        creatorID: '',
        fullName: ''
      })
      // this.creatorList = res.data.items.map(item => {
      //   return item.creator
      this.creatorList = res.data.map(data => {
        return data.username
      })
    },
    // 搜索
    hSearch () {
      this.requestParameters.page = 1
      this.loadQuestions()
    },
    //  清除
    hClear () {
      this.$refs.myForm.resetFields()
      this.formInline.city = ''
      this.formInline.province = ''
      this.loadQuestions()
    },
    // 操作----预览
    hPrevent (e) {
      e.preventDefault()
    },
    // 操作----编辑
    hEdit (id) {
      this.$router.push({ path: 'new', query: { id } })
      // this.$router.push('/questions/new'+ id)
    },
    // 操作----删除
    hDelete (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({
          id
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        console.log(res)
        this.loadQuestions()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '删除失败'
        })
      })
    },
    // 操作---精选
    Hselected (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choiceAdd({
          id,
          choiceState: 1
        })
        console.log('jingxuan', res)
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        })
        this.$router.push('/questions/choice')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '加入精选失败'
        })
      })
    },
    handleSizeChange (page) {
      // 页面显示多少条
      this.requestParameters.pagesize = page
      this.loadQuestions()
      // console.log('王芳让显示多少条', page)
    },
    handleCurrentChange (page) {
      // 页面跳转
      this.requestParameters.page = page
      this.loadQuestions()
      // console.log('当前页码', page)
    },
    indexId (index) {
      const page = this.requestParameters.page // 当前页码
      const pagesize = this.requestParameters.pagesize // 条数
      return (index + 1) + (page - 1) * pagesize
    }
  }
}
</script>

<style scoped lang="less">
  .box-card {
    margin-top: 10px;
  }
  .text {
    font-size: 18px;
  }
  .text span {
    font-size: 8px;
    color: pink;
  }
  .text {
    margin-bottom: 10px;
    height: 50px;
  }
  .container /deep/ .el-input__inner {
    width: 180px;
  }
  .grid-content {
    background-color: rgb(244,244,245);
  }
  .container /deep/ .pagebox .el-input__inner {
    width:60px;
  }
  .container /deep/ .pagebox .el-input {
    width: 120px!important;
  }
  .container /deep/ .pagebox .el-pagination__editor {
    width: 65px!important;
  }
  .container /deep/ .pagebox .el-input__inner[placeholder="请选择"] {
    width: 85px!important;
  }
  .container /deep/ .pagebox .el-pagination__editor {
    width: 110px!important;
  }
  .container .pagebox /deep/ .el-input__icon {
    width: 100px;
  }
  .container /deep/ .direction {
    margin-left:40px
  }
  .container /deep/ .city .el-input__inner{
    width: 85px
  }

</style>
